<template>
  <div>
    <InputSearch v-model:value="searchValue" placeholder="搜索" />
    <Tree
      style="margin-top: 10px"
      :expanded-keys="expandedKeys"
      :auto-expand-parent="autoExpandParent"
      :tree-data="props.treeData"
      @expand="onExpand"
      @select="props.select"
    >
      <template #title="{ key: treeKey, title }">
        <span :class="props.keyData.get(treeKey).icon"></span>
        <Dropdown :trigger="['contextmenu']" placement="bottomLeft" @contextmenu.stop>
          <span v-if="title.includes(searchValue)">
            {{ title.substring(0, title.indexOf(searchValue)) }}
            <span style="color: #f50">{{ searchValue }}</span>
            {{ title.substring(title.indexOf(searchValue) + searchValue.length) }}
          </span>
          <span v-else>{{ title }}</span>
          <template #overlay>
            <Menu @click="({ key: menuKey }) => onContextMenuClick(treeKey, menuKey)">
              <MenuItem key="1">First menu item</MenuItem>
              <MenuItem key="2">Second menu item</MenuItem>
              <MenuItem key="3">Third menu item</MenuItem>
            </Menu>
          </template>
        </Dropdown>
      </template>
    </Tree>
  </div>
</template>

<script lang="ts" setup>
  import { Tree, InputSearch, Dropdown, Menu, MenuItem } from "ant-design-vue";
  import { ref, watch, defineProps,onMounted } from "vue";

  const props = defineProps({
    treeData: {
      type: Array,
      required: true,
    },
    select: {
      type: Function,
      required: true,
    },
    keyData: {
      type: Map,
      required: true,
    },
  });

  const expandedKeys = ref<(string | number)[]>([]);
  const searchValue = ref<string>("");
  const autoExpandParent = ref<boolean>(true);

  // 扁平化存储所有节点
  const dataList: { key: string | number; title: string }[] = [];

  // 递归生成扁平化的节点列表
  const generateList = (data: any[]) => {
    console.log("ddffddss",data,dataList)
    data.forEach((node) => {
      const { key, title, children } = node;
      dataList.push({ key, title });
      if (children) {
        generateList(children);
      }
    });
  };

  onMounted(() => {
    // 初始化数据列表
    generateList(props.treeData);
  });
  // 获取节点的所有父节点
  const getParentKeys = (key: string | number, tree: any[], keys: (string | number)[] = []): (string | number)[] => {
    for (const node of tree) {
      if (node.children?.some((child) => child.key === key)) {
        keys.push(node.key);
        getParentKeys(node.key, tree, keys);
      } else if (node.children) {
        getParentKeys(key, node.children, keys);
      }
    }
    return keys;
  };

  // 搜索更新逻辑
  watch(searchValue, (value) => {
    if(dataList.length===0){
      generateList(props.treeData);
    }
    if (!value) {
      expandedKeys.value = [];
      autoExpandParent.value = false;
      return;
    }

    // 查找匹配的节点及其父节点
    const matchedKeys = dataList
      .filter((item) => item.title.includes(value))
      .map((item) => item.key);

    const allKeysToExpand = matchedKeys
      .flatMap((key) => [...getParentKeys(key, props.treeData), key]);

    // 去重并更新 expandedKeys
    expandedKeys.value = Array.from(new Set(allKeysToExpand));
    autoExpandParent.value = true; // 确保展开所有父节点
  });

  // 节点展开事件
  const onExpand = (keys: (string | number)[]) => {
    console.log("keys",keys)
    expandedKeys.value = keys;
    autoExpandParent.value = false;
  };

  // 右键菜单点击事件
  const onContextMenuClick = (treeKey: string | number, menuKey: string | number) => {
    console.log(`Node key: ${treeKey}, Menu key: ${menuKey}`);
  };
</script>

